<template>
  <view class="wrap">
    <!-- 顶部 -->
    <NavBar />
    <view class="container w" >
      <!-- 文章内容 -->
      <view class="article-content" ref="articleContent">
        <h1>{{article.title}}</h1>
        <!-- 文章作者 -->
        <view class="author" ref="author" v-if="article.user">
          <view class="author-left" @tap="$router.push({name:'User',params: {
      user_id:article.user_id
    }})">
            <view class="author-avatar" >
							<u-avatar :src="article.user.avatar"  size="36"></u-avatar>
            </view>
            <view class="author-name">
              <h4>{{article.user.nickname}}</h4>
              <view class="author-more">
                <span>{{article.createdAt | relativeTime}}</span>
                <span> · </span>
                <span>{{article.user.introduce}}</span>
              </view>
            </view>
          </view>
          <view class="author-right">
						<u-button size="small" type="primary" @tap="onClickFocus(article.user_id)">{{isAttentionAuthor ? '已关注':'+关注'}}</u-button>
          </view>
        </view>
        <!-- 文章描述 -->
				<u-parse :content="article.content" ref="content" class="content"></u-parse>
        <!-- <article class="content" ref="content" style="text-align: center; width: 100%; overflow: hidden;" v-html="article.content"> -->
          <!-- <view v-html="article.content"></view> -->
        </article>
      </view>
      <!-- 相关搜索 -->
      <MyPanel title="相关推荐" showTitle>
        <ArticleItem :config="config"></ArticleItem>
      </MyPanel>
      <MyPanel :title="'评论 ' + total + ''" showTitle>
        <ArticleComment @onShowPost="siPostshow=true" :articleId="articleId"/>
      </MyPanel>
    </view>
    <!-- 底部区域 -->
    <CommentAction  @onShowPost="siPostshow=true" :articleId="articleId"/>
    <!-- 分享 -->
    <my-share />
    <!-- 发布评论 -->
    <u-popup
    :show="siPostshow"
    mode="bottom"
		@close="siPostshow = false"
    >
    <PostComment :articleId="articleId" />
    </u-popup>
  </view>
</template>

<script>
import MyPanel from './components/My-panel.vue'
import ArticleItem from '@/pages/index/Article-item.vue'
import ArticleComment from './components/article-comment.vue'
import CommentAction from './components/comment-action.vue'
import NavBar from './components/My-NavBar.vue'
import PostComment from './components/post-comment.vue'
// import { ImagePreview } from 'vant'
import { getArticleId } from '@/api/article'
import { addUserFollowings,deleteUserFollowings,isWage } from '@/api/user'
import bus from '@/utils/bus'
import {mapGetters} from 'vuex'
export default {
  name: 'Article',
  components: {
    NavBar,
    MyPanel,
    ArticleItem,
    ArticleComment,
    CommentAction,
    PostComment
  },
  data () {
    return {
      total: 2980,
      siPostshow: false,
      config: {
        showAuthorName: true,
        showRead: true,
        // showAvatar: true
        one: true,
        showAvatar: false
      },
      articleId: 0,
      article: {},
      author_id:0,
      isAttentionAuthor:false
    }
  },
  computed:{
    ...mapGetters(['token'])
  },
	onLoad(options){
		this.articleId = options.article_id
		this.getArticle(this.articleId)
	},
  mounted () {

    bus.$on('postOk', () => {
      this.siPostshow = false
    })

  },
  methods: {
    async isWage(id){
      if(!this.token) return console.log('去登录');
      const res = await isWage(id)
      if(res){
        this.isAttentionAuthor = true
         // console.log('当前状态已关注');
      }else{
        // console.log('当前状态未关注');
        this.isAttentionAuthor = false
      }

    },
    async onClickFocus (author_id) {
      if(!this.token) return console.log('去登录');
      if(this.isAttentionAuthor){
        // 发起请求取消关注
         await deleteUserFollowings(author_id)
        // console.log('取消关注作者成功');
        this.isAttentionAuthor = false
      }else{
        // 发起请求关注
        const re = await addUserFollowings({follerd_id:author_id})
        if(!re) return console.log('关注失败');
        // console.log('关注作者成功');
        this.isAttentionAuthor = true
      }
    },
    async getArticle (id) {
      this.article = await getArticleId(id)
      this.author_id = this.article.user_id
      this.isWage(this.author_id)
      this.$nextTick(() => {
        this.handlePerviewImage()
      })
    },
    // 点击预览图片
    handlePerviewImage () {
      // 1获取文章内容 dom 容器
      const articleContent = this.$refs.content
      // 2得到所有的img标签
      let imgs = articleContent.querySelectorAll('img')
      const imgPaths = []
      // 3循环img列表，给img注册点击事件
      imgs.forEach((img, index) => {
        imgPaths.push(img.src)
        img.onclick = function () {
          ImagePreview({
            images: imgPaths, // 预览图片路径
            startPosition: index// 图片起始位置
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50px;
  top: 46px;
  overflow-y: auto;
}

.article-content {
  // background-color:#000;
  padding: 5px 15px;
  // margin-top: 46px;
  h1 {
    text-align: left;
    font-size: 22px;
  }
  .author {
    color: #000;
    // height: 40px;
    // background-color: antiquewhite;
    display: flex;
    justify-content: space-between;
    .author-left {
      display: flex;
      .author-avatar {
        margin-top: 5px;
        margin-right: 15px;
      }
      .author-name {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-size: 14px;
        // margin-top:4px;
        h4 {
          margin: 0;
        }
        span {
          margin-right: 2px;
        }
      }
      .author-more {
        color: rgb(200, 195, 195);
        font-size: 12px;
        width: 200px;
        margin-right: 10px;
        overflow: hidden; //溢出内容隐藏
          text-overflow: ellipsis; //文本溢出部分用省略号表示
          display: -webkit-box; //特别显示模式
          -webkit-line-clamp: 1; //行数
          -webkit-box-orient: vertical; //盒子中内容竖直排列
      }
    }
    .author-right {
    }
  }
  .content {
		// width: 100% !important;
		margin-top: 10px;
    font-size: 16px;
    p {
      line-height: 28px;
      color: #000;
    }
    img {
			text-align: center;
      width: 100%;
      height: auto;
      border-radius: 5px;
    }
  }
}
</style>
